$mob: 770px;

.root {
  &:not(.root_modal) {
    z-index: 2;
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;

    ul {
      margin: 0;
    }

    .box,
    .list {
      background: #ffffff;
      box-shadow: 0px 15px 40px -2px rgba(29, 33, 94, 0.15);
      border-radius: 6px;
    }

    .list {
      min-width: 160px;
      padding: 8px 0;

      max-height: 240px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        display: none;
      }
    }

    &.root_top {
      top: unset;
      bottom: calc(100% + 2px);
    }
  }
}

.li {
  font-weight: 400;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: -0.0041em;
}

.li > * {
  width: 100%;
  padding: 8px 18px;

  text-align: left;
}

.root_open:not(.root_modal) {
  opacity: 1;
  pointer-events: auto;
}

.root_fullwidth {
  &,
  .list,
  .box {
    width: 100%;
  }
}

.modal_container {
  padding: 16px 0;
}
